<template>
	<view class="monitoring-content">
		<contont-nav-bar></contont-nav-bar>
		<group-frame>
			<view slot="list" class="list">
				<!-- <video-list :videoList="picUrlList" @onVideo='onVideo'></video-list> -->
				<!-- <video-list :videoList="picVideo" @onVideo='onVideo' @scrolltolower="scrolltolower" :loading="loading"></video-list> -->
				<mescroll-uni  ref="mescrollRef" @init="mescrollInit" height="75.57vh" class="mescroll" @up="upCallback" :up="upOption" :down="downOption">
					<video-list :videoList="picVideo" @onVideo='onVideo'></video-list>
				</mescroll-uni>
			</view>
			<view slot="left">
				<m-tabbar-l @onFilter="onFileter"                                                                                                                                         ></m-tabbar-l>
			</view>
			<view slot="center" class="monitoring-center">
				<view class="name">主柜·监控视频</view>
			</view>
			<view slot="right">
				<m-tabbar-r @onClose="onClose"></m-tabbar-r>
			</view>
		</group-frame>
		<!-- 查询弹出层 -->
		<uni-popup ref="popup-datafind" type="center">
			<view class="find-data">
				<view class="top">
					<view class="top-l">
						<text class="top-text">筛选</text>
					</view>
					<image class="top-r" @tap="$refs['popup-datafind'].close()" src="../../static/guanbihei.png" mode="widthFix"></image>
				</view>
				<view class="time-list">
					<view class="time-text">时间段:</view>
					<view class="time-selector">
						<view class="selector">
							<view class="data-text" @tap="dateVisible1=true">{{dateValue1}}</view>						
							<view class="line"></view>
							<view class="data-text" @tap="timeVisible1=true">{{timeValue1}}</view>						
						</view>
						<text class="text">至</text>
						<view class="selector">
							<view class="data-text" @tap="dateVisible2=true">{{dateValue2}}</view>
							<view class="line"></view>
							<view class="data-text" @tap="timeVisible2=true">{{timeValue2}}</view>
						</view>
					</view>
				</view>
				<view class="contentBoxRadio">
					<view class="titleR">门开关：</view>
					<radio-group class="radioTop" @change="radioChange">
						<label class="radioInfo" v-for="(item,index) in titleType" :key="index">
							<view>
								<radio color="#007AFF" :value="item" :checked="index===currentIndex"/>
							</view>
							<view class="radioText">{{item}}</view>
						</label>
					</radio-group>
				</view>
				<view class="search">
					<button class="search-btn" type="default" @tap="onConVideo">确认</button>
				</view>
				<w-picker
					:visible.sync="dateVisible1"
					mode="date" 
					:startYear="startYear" 
					:endYear="endYear"
					:value="dateValue1"
					:current="false"
					fields="day"
					@confirm="onBeforeDate($event,'date1')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date1"
				></w-picker>
				<!-- 前时间 -->
				<w-picker
					:visible.sync="timeVisible1"
					mode="time" 
					:value="timeValue1"
					:current="true"
					:second="true"
					@confirm="onBeforeTime($event,'time1')"
					@cancel="onCancel"
					ref="time1" 
				></w-picker>
				<!-- 后日期 -->
				<w-picker
					:visible.sync="dateVisible2"
					mode="date" 
					:startYear="startYear"
					:endYear="endYear"
					:value="dateValue2"
					:current="true"
					fields="day"
					@confirm="onAfterDate($event,'date2')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date2"
				></w-picker>
				<!-- 后时间 -->
				<w-picker
					:visible.sync="timeVisible2"
					mode="time" 
					:value="timeValue2"
					:current="true"
					:second="true"
					@confirm="onAfterTime($event,'time2')"
					@cancel="onCancel"
					ref="time2" 
				></w-picker>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const module = uni.requireNativePlugin('uniplugin_module-release')
	import { mapState } from 'vuex'
	
	import MTabbarR from '../../components/monitoring/m-tabbar-r.vue'
	import MTabbarL from '../../components/monitoring/m-tabbar-l.vue'
	import VideoList from '../../components/monitoring/video-list.vue'
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import GroupFrame from "../../components/group-frame/group-frame.vue"
	import ContontNavBar from '../../components/common/contont-nav-bar.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			GroupFrame,
			ContontNavBar,
			// uniPopup,
			VideoList,
			MTabbarL,
			MTabbarR
		},
		data() {
			return {
				downOption:{
					use:false
				},
				upOption:{
					page:{
						num : 1 ,
						size : 15 ,
						time : null
					},
					auto: false,
					noMoreSize: 15,
					offset:400,
					textNoMore:'我是有底线的 >_<'  
				},
				currentIndex: 0, //默认单选索引
				videoType:'全部',
				titleType: ['全部','仅相关视频'],
				dateVisible1:false,
				timeVisible1:false,
				dateVisible2:false,
				timeVisible2:false,
				dateValue1: '',
				timeValue1: '',
				dateValue2: '',
				timeValue2: '',
				startYear: '',
				endYear:'',
				// picUrlList:this.$store.state.imageMom || []
				picVideo: [],
				pageSize: 15, //查询数量
				page:0, //从第几条数据之后开始
			}
		},
		computed: {
			...mapState(['monitoringImage','ystoKen'])
		},
		onLoad() {
			this.locadVideo()
			// this.$store.getters.getvid_db_data({tobDate:"2021-05-06 10:42:00",afterDate:"2021-05-06 10:44:00"}).then(res=>{
			// 	console.log(res);
			// })
		},
		methods: {
			upCallback(mescroll){
				console.log(6655,"下拉",mescroll);
				// 结束上拉加载状态  isShowNoMore=true, 显示无更多数据; isShowNoMore=false, 隐藏上拉加载; isShowNoMore=null, 保持当前状态
				this.$store.getters.getvideo_db_data({pageSize:this.pageSize,page:this.page}).then(res=>{
					console.log(res);
					// console.log(this.page);
					this.mescroll.endSuccess(res.length);
					res.map(item=>{
						this.picVideo.push(item)
					})
					this.page += 15
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			onFileter(){
				let dataArray = this.forMart()
				let dataObj = dataArray[1]
				console.log(dataObj);
				this.dateValue1 = `${dataObj.year}-${dataObj.oldMonth}-${dataObj.day}`
				// this.dateValue1 = `2021-03-30`
				this.timeValue1 = `${dataObj.hour}:${dataObj.minute}:${dataObj.seconds}`
				this.dateValue2 = `${dataObj.year}-${dataObj.month}-${dataObj.day}`
				this.timeValue2 = `${dataObj.hour}:${dataObj.minute}:${dataObj.seconds}`
				this.startYear = `${dataObj.year}`
				this.endYear = `${dataObj.year}`
				this.$refs['popup-datafind'].open()
				
			},
			onClose() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			locadVideo(){
				this.$store.getters.getvideo_db_data({pageSize:this.pageSize,page:this.page}).then(res=>{
					this.picVideo = res
					console.log(res);
					this.page += 15
				})
			},
			onConVideo(){
				console.log(this.dateValue1,this.timeValue1,this.dateValue2,this.timeValue2,this.videoType);
				this.picVideo = []
				let TobDate = `${this.dateValue1} ${this.timeValue1}`
				let AfterDate = `${this.dateValue2} ${this.timeValue2}`
				console.log(TobDate,AfterDate);
				if(this.videoType==="仅相关视频"){
					this.$store.getters.getvid_db_data({tobDate:TobDate,afterDate:AfterDate}).then(res=>{
						console.log(res);
						this.picVideo = res
						this.loading = '无更多视频'
						this.$refs['popup-datafind'].close()
					})
					// this.picVideo = this.$store.state.imageMom.filter(item=>{
					// 	if(item.time>=tobDate && item.time<=afterDate){
					// 		return item
					// 	}
					// })
				}else{
					this.$store.getters.getvideo_db_data({pageSize:this.pageSize,page:this.page}).then(res=>{
						this.picVideo = res
						this.loading = '无更多视频'
						this.$refs['popup-datafind'].close()
					})
					// this.picVideo = this.$store.state.imageMom
					
				}
			},
			// scrolltolower(){
			// 	if(this.loading==='加载中...'){
			// 		return
			// 	}else if(this.loading==='无更多视频'){
			// 		return
			// 	}
				
			// 	this.loading = '加载中...'
				
			// 	this.$store.getters.getvideo_db_data({pageSize:this.pageSize,page:this.page}).then(res=>{
			// 		console.log(res);
			// 		// console.log(this.page);
			// 		if(res.length>0){
			// 			res.map(item=>{
			// 				this.picVideo.push(item)
			// 			})
			// 			this.page += 15
			// 			this.loading = '上拉记载更多'
			// 		}else{
			// 			console.log(123);
			// 			this.loading = '无更多视频'
			// 		}
			// 	})
			// },
			onVideo(videoComment){
				let time = videoComment.time.replace(/[-|:|' ']/g,'')
				let nowTimeArray = this.forMart()
				let nowTime = nowTimeArray[0].timeNow
				nowTime = nowTime.replace(/[-|:|' ']/g,'')
				console.log(time,nowTime);
				console.log(this.ystoKen.accessToken);
				module.playVideo({
					"AppKey":"8b7fdfdb47ac4ad9b083b970a4f7c230",
					"AccessToken":this.ystoKen.accessToken,
					"Url":`ezopen://ZQRWKA@open.ys7.com/E95470902/1.rec?begin=${time}&end=${nowTime}`
				})
			},
			radioChange(e){
				this.videoType = e.detail.value
			},
			// onSearch() {   //点击搜索
			// 	console.log('onSearch')
			// },
			onBeforeDate(res,type){ //前日期
				this.dateValue1= res.result
				// console.log(res);
			},
			onBeforeTime(res,type){ //前时间
				this.timeValue1= res.result
			},
			onAfterDate(res,type){ //后日期
				this.dateValue2= res.result
			},
			onAfterTime(res,type){ //后时间
				this.timeValue2= res.result
			},
			onCancel(){},
			checkClick(index){ //单选按钮点击
				this.currentIndex = index
			},
			forMart(){
				let dates = new Date()
				let year = dates.getFullYear()
				let month = dates.getMonth() + 1
				let oldMonth =  dates.getMonth()
				let day = dates.getDate()
				let hour = dates.getHours() < 10 ? "0" + dates.getHours() : dates.getHours()
				let minute = dates.getMinutes() < 10 ? "0" + dates.getMinutes() : dates.getMinutes()
				let seconds = dates.getSeconds() < 10 ? "0" + dates.getSeconds() : dates.getSeconds()
				month >= 1 && month <= 9 ? (month = "0" + month) : ""
				oldMonth >= 1 && oldMonth <= 9 ? (oldMonth = "0" + oldMonth) : ""
				day >= 0 && day <= 9 ? (day = "0" + day) : ""
				return [
					{
						'timeNow':year+'-'+month+'-'+day+' '+hour+':'+minute+':'+seconds,
					},
					{
						'year':year,
						'month':month,
						'day':day,
						'hour':hour,
						'minute':minute,
						'seconds':seconds,
						'oldMonth':oldMonth
					}
				]
			}
		}
	}
</script>

<style scoped lang="less">
.list{
	width:100%;
	// height:1162rpx;
	height: 75.75vh;
	overflow: scroll;
	box-sizing: border-box;
}
.monitoring-content {
	position:relative;
	width:100vw;
	height:100vh;
	// .monitoring-left image {
	// 	width: 22rpx;
	// }
	.monitoring-center {
		display: flex;
		align-items: center;
	}
	.monitoring-center .name {
		font-size:52rpx;
		color: #fff;;
		letter-spacing: 5rpx;
		// margin: 0 8rpx;
	}
}
.find-data{
	background: #FFFFFF;
	// width: 886rpx;
	width: 30.76vw;
	height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	.top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 51rpx 0 42rpx 0;
		padding-right: 66rpx;
		box-sizing: border-box;
		.top-l{
			background: ;
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 226rpx;
			// height: 87rpx;
			width: 8vw;
			height: 5.63vh;
			background: linear-gradient(180deg, rgba(114, 180, 255, 0.9), rgba(73, 153, 235, 0.9), rgba(43, 125, 209, 0.9));
			box-shadow: 0px 0px 2px 0px rgba(27, 67, 140, 0.64);
			border-radius: 0 87rpx 87rpx 0;
			.top-text{
				font-size: 41rpx;
				color: #FFFFFF;
				letter-spacing: 16rpx;
			}
		}
		.top-r{
			// width: 68rpx;
			// height: 68rpx !important;
			width: 2.37vw;
			height: 4.45vh !important;
		}
	}
	.time-list{
		box-sizing: border-box;
		// width: 790rpx;
		width: 27.44vw;
		// height: 345rpx;
		height: 24.5vh;
		margin: 0 48rpx 120rpx 48rpx;
		padding: 32rpx 34rpx;
		border-radius: 20rpx;
		background: #F1F9FF;
		margin-bottom: 30rpx !important;
		.time-text{
			font-size: 34rpx;
			color: #777777;
		}
		.time-selector{
			padding: 34rpx 0 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			.selector{
				box-sizing: border-box;
				// width: 292rpx;
				// height: 210rpx;
				width: 11.14vw;
				height: 13.73vh;
				border: 4rpx solid #4F9AFF;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 0 34rpx;
				text-align: center;
				.data-text{
					font-size: 35rpx;
					color: #777777;
					// margin: 27rpx 0 27rpx 0;
					margin: 1.7vh 0 1.7vh 0;
					font-weight: 400;
				}
				.line{
					width: 100%;
					height: 4rpx;
					background: #4F9AFF;
				}
			}
			.text{
				font-size: 34rpx;
				color: #777777;
			}
		}
	}
	.search{
		display: flex;
		align-items: center;
		justify-content: center;
		.search-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 478rpx;
			// height: 110rpx;
			width: 16.67vw;
			height: 7.19vh;
			background: #4F9AFF;
			color: #FFFFFF;
			font-size: 41rpx;
			border-radius: 110rpx;
			letter-spacing: 5rpx;
		}
	}	
	.contentBoxRadio {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 27.44vw;
		margin: 0 auto;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 32vh;
		.radioTop {
			display: flex;
			align-items: center;
			padding: 0 0 34rpx 30rpx;
		}
		.titleR {
			color: #777777;
			font-size: 34rpx;
			padding: 34rpx 0 40rpx 30rpx;
		}
		.radioInfo {
			display: flex;
			align-items: center;
			margin-right: 120rpx;
			.radioText {
				font-size: 34rpx;
				color: #777777;
			}
		}
	}
}
.mescroll{
	
}
</style>
